<template>
    <div class="person">
        <h2>watch监控数据的情况一</h2>
        <h2>{{ sum }}</h2>
        <button @click="changeSum()">修改sum的值</button>
    </div>

</template>

<script setup lang="ts" name="Person">
import { ref,watch } from 'vue';
    let sum=ref(0)
    function changeSum(){
        sum.value+=1
    }
    const stopWatch=watch(sum,(newSum,oldSum)=>{
        console.log("sum发生了变化",newSum,oldSum)
        if(newSum>=10){
            stopWatch()
        }

    })
   

</script>
<style>
.person{
    background-color: lightseagreen;
	box-shadow: 6px 6px 12px gray;
	border-radius: 6px;
	line-height: 40px;
	padding:10px;

}
</style>